<xmp type="template" name="form.input.text.base">
    <inputWrap>
        <input class="inner-input" type="text" name="{{name}}" value="{{value}}" bind-input="{{'value'}}" placeholder="{{placeholder}}" event-focus="{{'$Private.event.showIcon'}}" event-blur="{{'$Private.event.hideIcon'}}" disabled="{{disabled}}" />
        <icon bind-style="line-height: 22px;display:{{$Private.__FOCUS__&&'block'||'none'}}" class="icon-arrow-left-3" event-mousedown="{{'$Private.event.clearValue'}}"></icon>
    </inputWrap>
</xmp>
<script type="text/vm" name="form.input.text.base">
function(vm) {
    var inputNode = vm.queryElement({
        tagName: "INPUT"
    });
    vm.set("$Private.event.showIcon", function(e) {
        vm.set("$Private.__FOCUS__", true);
    });
    vm.set("$Private.event.hideIcon", function(e) {
        vm.set("$Private.__FOCUS__", false);
    });
    vm.set("$Private.event.clearValue", function(e) {
        vm.set("value", "");
    });
}
</script>
<xmp type="template" name="form.input.text">
    <div>
        <div>{{title}}<icon bind-class="{{icon-class}}"></icon></div>
        {{#> "form.input.text.base","$This"}}
    </div>
</xmp>
<xmp type="template" name="form.input.text.block">
    <txtblock>
        <div>{{title}}</div>
        <inputWrap>
            <input class="inner-input" type="text" maxlength="30" name="{{name}}" value="{{$Private.data.value}}" bind-input="{{'$Private.data.value'}}" placeholder="{{placeholder}}" event-focus="{{'$Private.event.showIcon'}}" event-blur="{{'$Private.event.hideIcon'}}" disabled="{{disabled}}" />
            <icon bind-style="line-height: 22px;display:{{$Private.__FOCUS__&&'block'||'none'}}" class="icon-plus" title="add" event-mousedown="{{'$Private.event.addBlock'}}"></icon>
        </inputWrap>
        <blocksWrap>
            {{#each value}}
            <blockItem class="{{$Index==0&&'first'||''}}">{{$This}}
                <remover event-click="{{'$Caller.$Private.event.removeBlock'}}">
                    <icon title="delete" class="icon-undo"></icon>
                </remover>
            </blockItem>
            {{/each}}
        </blocksWrap>
    </txtblock>
</xmp>
<script type="text/vm" name="form.input.text.block">
function(vm) {
    var inputNode = vm.queryElement({
        tagName: "INPUT"
    });
    vm.set("$Private.event.showIcon", function(e) {
        vm.set("$Private.__FOCUS__", true);
    });
    vm.set("$Private.event.hideIcon", function(e) {
        vm.set("$Private.__FOCUS__", false);
    });
    vm.set("$Private.event.addBlock", function(e) {
        var item = jSouper.trim(vm.get("$Private.data.value"));
        if (item) {
            var value = vm.get("value") || [];
            value.push(item);
            vm.set("value", value);
            vm.set("$Private.data.value", "");
        }
    });
    vm.set("$Private.event.removeBlock", function(e, vi) {
        vi.remove();
    });
}
</script>

<xmp type="template" name="form.input.number">
    <div>
        <div>{{title}}</div>
        <inputWrap>
            <input class="inner-input" type="text" name="{{name}}" value="{{value}}" bind-input="{{'value'}}" placeholder="{{placeholder}}" event-focus="{{'$Private.event.showIcon'}}" event-blur="{{'$Private.event.hideIcon'}}" disabled="{{disabled}}" event-input="{{'$Private.event.onlyNumber'}}" event-blur-formNumber="{{'$Private.event.formatNumber'}}" />
            <icon bind-style="line-height: 22px;display:{{$Private.__FOCUS__&&'block'||'none'}}" class="icon-arrow-left-3" event-mousedown="{{'$Private.event.clearValue'}}"></icon>
        </inputWrap>
    </div>
</xmp>
<script type="text/vm" name="form.input.number">
function(vm) {
    var inputNode = vm.queryElement({
        tagName: "INPUT"
    });
    vm.set("$Private.event.showIcon", function(e) {
        vm.set("$Private.__FOCUS__", true);
    });
    vm.set("$Private.event.hideIcon", function(e) {
        vm.set("$Private.__FOCUS__", false);
    });
    vm.set("$Private.event.clearValue", function(e) {
        vm.set("value", "");
    });
    vm.set("$Private.event.onlyNumber", function(e) {
        var result = vm.get("value");
        var newResult = result.replace(/[^0-9\.]/g, "");
        if (result !== newResult) {
            vm.set("value", newResult);
        }
    });
    vm.set("$Private.event.formatNumber", function(e) {
        var result = parseFloat(vm.get("value"));
        if (String(result) === "NaN") {
            result = 0;
        }
        var mix = vm.get("mix");
        if (mix !== undefined) {
            mix = parseFloat(mix);
            result = mix < result ? result : mix;
        }
        var max = vm.get("max");
        if (max !== undefined) {
            max = parseFloat(max);
            result = max > result ? result : max;
        }
        vm.set("value", result);
    });
}
</script>

<xmp type="template" name="form.input.password">
    <div class="input-control password">
        <input type="password" value="" placeholder="input password" />
        <button class="btn-reveal"></button>
    </div>
</xmp>

<xmp type="template" name="form.input.select">
        <select>
            <option></option>
            {{#each options}}
            <option>{{option}}</option>
            {{/each}}
        </select>
</xmp>

<xmp type="template" name="form.input.search">
    <searchWrap>
        <span>{{title}}</span>
        {{#> "form.input.select","select"}}        
        <input type="text" />
        <button class="btn-search default">search</button>
    </searchWrap>
</xmp>

<xmp type="template" name="form.input.file">
    <div class="input-control file">
        <input type="file" />
        <button class="btn-file"></button>
    </div>
</xmp>

<xmp type="template" name="form.input.select.search">
    <div>
        <div>{{title}}</div>
        <div class="input-control text">
            <selectWrap>
                <selectResult bind-style="{{$Private.__SELECTHIDDEN__&&'z-index:3'}}" event-click="{{'$Private.event.toggleSelectOptions'}}">
                    <selectText>{{$Private.data.result}}</selectText>
                    <icon style="line-height: 22px;" class="icon-arrow-down-3"></icon>
                </selectResult>
                <selectHidden bind-style="display:{{$Private.__SELECTHIDDEN__&&'block'||'none'}}">
                    <input type="text" bind-input="{{'$Private.data.searchText'}}" event-input="{{'$Private.event.filterOptions'}}" />
                    <input type="hidden" name="{{name}}" value="{{value}}">
                    <optionContainer bind-style="display:{{$Private.__FILTEROPTIONCONTAINER__&&'none'||'block'}}">
                        {{#each options}}
                        <optionItem event-click="{{'$Caller.$Private.event.chooseOption'}}">{{title}}</optionItem>
                        {{/each}}
                    </optionContainer>
                    <filterOptionContainer bind-style="display:{{$Private.__FILTEROPTIONCONTAINER__&&'block'||'none'}}">
                        {{#each $Private.data.filterOptions}}
                        <optionItem event-click="{{'$Caller.$Private.event.chooseOption'}}">{{title}}</optionItem>
                        {{/each}}
                    </filterOptionContainer>
                </selectHidden>
            </selectWrap>
        </div>
    </div>
</xmp>
<script type="text/vm" name="form.input.select.search">
function(vm) {
    // // //测试数据
    // vm.set("options", [{
    //     value: "volvo",
    //     title: "闽江学院"
    // }, {
    //     value: "saab",
    //     title: "工程学院"
    // }, {
    //     value: "opel",
    //     title: "江夏学院"
    // }, {
    //     value: "D",
    //     title: "农林大学"
    // }]);

    console.info("options", vm.get("title"), vm.get("options"));


    var selectHiddenNode = vm.queryElement({
        tagName: "SELECTHIDDEN"
    })[0];
    var searchNode = vm.queryElement({
        tagName: "INPUT"
    })[0];

    vm.addAttr(selectHiddenNode, {
        "event-mouseenter": "{{'$Private.event.hoverOptionItem'}}"
    });

    vm.set("$Private.event.hoverOptionItem", function(e) {
        // console.log(e.target,this);
    });

    searchNode.onblur = function() {
        setTimeout(function() {
            //延迟保证select能触发
            vm.model.set("$Private.__SELECTHIDDEN__", false);
        }, 160);
    }

    vm.set("$Private.event.toggleSelectOptions", function(e) {
        vm.model.toggle("$Private.__SELECTHIDDEN__");
        try {
            searchNode.focus();
        } catch (e) {}

    });

    vm.set("$Private.data.result", Model.Observer(function() {
        var options = vm.get("options") || [];
        var value = vm.get("value");
        var result;
        jSouper.forEach(options, function(optionItem) {
            if (optionItem.value === value) {
                result = optionItem.title
            }
        });
        return result;
    }));

    //数据对象改变时重新绑定依赖
    vm.model.onfollow = function() {
        console.log("reset Observer!");
        vm.get("$Private.data.result");
        vm.model.touchOff("$Private.data.result");
    };


    vm.set("$Private.event.chooseOption", function(e, vi) {
        // vm.set("result", vi.get("title"));
        vm.set("value", vi.get("value"));
        vm.set("__selectedOption__",vi.get());
    });

    vm.set("$Private.event.filterOptions", function(e) {
        var value = vm.get("$Private.data.searchText").replace(/\s/g, "");
        vm.set("$Private.__FILTEROPTIONCONTAINER__", value);
        if (!value) {
            return
        }
        value = value.replace(/(\W)/g, "\\$1");
        var matchReg = new RegExp("[" + value + "]", "gi");
        var arrayData = vm.get("options") || [];
        var filterData = [];
        var _empty_match_array = []
        jSouper.forEach(arrayData, function(optionData) {
            filterData.push({
                option: optionData,
                match: (optionData.title || "").match(matchReg) || _empty_match_array
            })
        });
        filterData.sort(function(a, b) {
            return b.match.length - a.match.length
        });
        var filterArrayData = [];
        jSouper.forEach(filterData, function(filterItem) {
            filterArrayData.push(filterItem.option);
        });
        vm.set("$Private.data.filterOptions", filterArrayData);
    });
}
</script>
